<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- <html xmlns="http://www.w3.org/1999/xhtml"> -->
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="email=no" />
    <meta name="wap-font-scale"  content="no" />
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>H+ 后台主题UI框架 - 主页示例</title>

    <link rel="shortcut icon" href="favicon.ico"></link> <link th:href ="@{/static/login/css/bootstrap.min.css?v=3.3.5}" rel="stylesheet"></link>
    <link th:href ="@{/static/login/css/font-awesome.min.css?v=4.4.0}" rel="stylesheet"></link>
<link th:href ="@{/static/login/fonts/tmpfont.css?v=4.4.0}" rel="stylesheet"></link>
    <link th:href ="@{/static/login/fonts/smfont.css?v=4.4.0}" rel="stylesheet"></link>

    <link th:href ="@{/static/login/css/animate.min.css}" rel="stylesheet"></link>
    <link th:href ="@{/static/login/css/style.min.css?v=4.0.0}" rel="stylesheet"></link>
    <link th:href ="@{/static/login/css/smart.css?v=4.1.0}" rel="stylesheet"></link>

</head>

<body class="gray-bg">


<div class="wrapper wrapper-content">
    <!--统计-->
    <div class="row">
        <div class="col-sm-8">
            <div class="ibox white-bg">
                <div class="flex_box statistics">
                    <div class="flex_block"><a href="##" class="statistics_block"><div class="head">公园(个)</div><span class="result"><span class="bold_font">18</span></span></a></div>
                    <div class="flex_block"><a href="##" class="statistics_block"><div class="head">客流(人次)</div><span class="result"><span class="bold_font">889654</span></span></a></div>
                    <div class="flex_block"><a href="##" class="statistics_block"><div class="head">部件(件)</div><span class="result"><span class="bold_font">598963</span></span></a></div>
                    <div class="flex_block"><a href="##" class="statistics_block"><div class="head">告警(个)</div><span class="result"><span class="bold_font">105</span><span class="dot"></span></span></a></div>
                    <div class="flex_block"><a href="##" class="statistics_block"><div class="head">人员(个)</div><span class="result"><span class="bold_font">698</span><span class="num">3</span></span></a></div>
                    <div class="flex_block"><a href="##" class="statistics_block"><div class="head">上报(条)</div><span class="result"><span class="bold_font">65</span></span></a></div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox white-bg">
            <div class="swiper-container index_roll ">
                <div class="swiper-wrapper">

                    <div class="swiper-slide" >
                        <div class="block flex_box">
                            <a href="##" class="pic" style="background-image: url(http://192.168.0.159:8086/static/login/img/p_big1.jpg)"></a>
                            <div class="flex_block">
                                <div class="title"><a href="##" class="ell">思想工作做到家自行整改顶呱呱</a></div>
                                <div class="txt ell_2_d">11月8日上午9点许，求索西路中国工商银行大楼顶上的大型墙体灯箱广告拆除工作正进展得如火如荼，岳阳市城管局行政执法支队的执法人员在银行门前人行道上拉起警戒线，协助维持现场秩序，劝导过往的市民朋友远离灯箱广告拆除现场。</div>
                                <div class="from">来自莲花山公园</div>
                            </div>
                        </div>
                    </div>

                    <div class="swiper-slide" >
                        <div class="block flex_box">
                            <div class="flex_block">
                                <div class="title"><a href="##" class="ell">思想工作做到家自行整改顶呱呱</a></div>
                                <div class="txt ell_2_d">11月8日上午9点许，求索西路中国工商银行大楼顶上的大型墙体灯箱广告拆除工作正进展得如火如荼，岳阳市城管局行政执法支队的执法人员在银行门前人行道上拉起警戒线，协助维持现场秩序，劝导过往的市民朋友远离灯箱广告拆除现场。</div>
                                <div class="from">来自莲花山公园</div>
                            </div>
                        </div>
                    </div>


                    <div class="swiper-slide" >
                        <div class="block flex_box">
                            <div class="flex_block">
                                <div class="title"><a href="##" class="ell">思想工作做到家自行整改顶呱呱想工作做到家自行整改顶呱呱想工作做到家自行整改顶呱呱</a></div>
                                <div class="txt ell_2_d">11月8日上午9点许，求索西路中国工商银行大楼顶上的大型墙体灯箱广告拆除工作正进展得如火如荼，岳阳市城管局行政执法支队的执法人员在银行门前人行道上拉起警戒线，协助维持现场秩序，劝导过往的市民朋友远离灯箱广告拆除现场。</div>
                                <div class="from">来自莲花山公园</div>
                            </div>
                        </div>
                    </div>


                    <div class="swiper-slide" >
                        <div class="block flex_box">
                            <a href="##" class="pic" style="background-image: url(http://192.168.0.159:8086/static/login/img/p_big1.jpg)"></a>
                            <div class="flex_block">
                                <div class="title"><a href="##" class="ell">思想工作做到家自行整改顶呱呱</a></div>
                                <div class="txt ell_2_d">11月8日上午9点许，求索前人行道上拉除现场。</div>
                                <div class="from">来自莲花山公园</div>
                            </div>
                        </div>
                    </div>



                </div>
            </div>
            </div>
        </div>
    </div>

    <!--图表-->
    <div class="row">
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>公园客流</h5>
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-xs btn-white active">天</button>
                            <button type="button" class="btn btn-xs btn-white">月</button>
                            <button type="button" class="btn btn-xs btn-white">年</button>
                        </div>
                    </div>
                </div>
                <div class="ibox-content" style="height:267px;overflow: hidden">
                    <div id="keliu" style="height: 239px;"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备状态</h5>
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-xs btn-white active">天</button>
                            <button type="button" class="btn btn-xs btn-white">月</button>
                            <button type="button" class="btn btn-xs btn-white">年</button>
                        </div>
                    </div>
                </div>
                <div class="ibox-content" style="height:267px;overflow: hidden">
                    <div  id="shebei" style="float: left;width: 66.66%;height: 239px;"></div>
                    <div  id="guzhang" style="float: left;width:33.33%;height: 239px;"></div>
                    <div class="float_clear"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备告警</h5>
                    <div class="pull-right">
                        <div class="btn-group">
                            <button type="button" class="btn btn-xs btn-white active">天</button>
                            <button type="button" class="btn btn-xs btn-white">月</button>
                            <button type="button" class="btn btn-xs btn-white">年</button>
                        </div>
                    </div>
                </div>
                <div class="ibox-content" style="height:267px;overflow: hidden">
                    <div id="gaojing" style="height: 239px;"></div>
                </div>
            </div>
        </div>
    </div>


    <div class="break_nor"></div>
    <div class="block_ban">
        <div class="flex_box">
            <div class="flex_block break_left"></div>
            <a href="##" class="title">所有数据报表</a>
            <div class="flex_block break_right"></div>
        </div>
        <a href="##" class="arrow_more tmpfont tmpicon-right"></a>
    </div>
    <div class="break_nor"></div>
    <!--所有报表-->
    <div class="row all_report">
        <div class="col-sm-2">
            <div class="ibox float-e-margins white-bg">
                <div class="block">
                    <a class="title ell">客流报表</a>
                    <div class="line_break gap_mid"></div>
                <div class="opt"><div class="flex_box"><div class="flex_block"><a href="##">详细</a></div><span class="break"></span><div class="flex_block"><a href="##">下载</a></div></div></div>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins white-bg">
                <div class="block">
                    <a class="title ell">车辆报表</a>
                    <div class="line_break gap_mid"></div>
                    <div class="opt"><div class="flex_box"><div class="flex_block"><a href="##">详细</a></div><span class="break"></span><div class="flex_block"><a href="##">下载</a></div></div></div>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins white-bg">
                <div class="block">
                    <a class="title ell">设备报表</a>
                    <div class="line_break gap_mid"></div>
                    <div class="opt"><div class="flex_box"><div class="flex_block"><a href="##">详细</a></div><span class="break"></span><div class="flex_block"><a href="##">下载</a></div></div></div>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins white-bg">
                <div class="block">
                    <a class="title ell">告警报表</a>
                    <div class="line_break gap_mid"></div>
                    <div class="opt"><div class="flex_box"><div class="flex_block"><a href="##">详细</a></div><span class="break"></span><div class="flex_block"><a href="##">下载</a></div></div></div>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins white-bg">
                <div class="block">
                    <a class="title ell">环境监测报表</a>
                    <div class="line_break gap_mid"></div>
                    <div class="opt"><div class="flex_box"><div class="flex_block"><a href="##">详细</a></div><span class="break"></span><div class="flex_block"><a href="##">下载</a></div></div></div>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins white-bg">
                <div class="block">
                    <a class="title ell">客流报表</a>
                    <div class="line_break gap_mid"></div>
                    <div class="opt"><div class="flex_box"><div class="flex_block"><a href="##">详细</a></div><span class="break"></span><div class="flex_block"><a href="##">下载</a></div></div></div>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins white-bg">
                <div class="block">
                    <a class="title ell">车辆报表</a>
                    <div class="line_break gap_mid"></div>
                    <div class="opt"><div class="flex_box"><div class="flex_block"><a href="##">详细</a></div><span class="break"></span><div class="flex_block"><a href="##">下载</a></div></div></div>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins white-bg">
                <div class="block">
                    <a class="title ell">设备报表</a>
                    <div class="line_break gap_mid"></div>
                    <div class="opt"><div class="flex_box"><div class="flex_block"><a href="##">详细</a></div><span class="break"></span><div class="flex_block"><a href="##">下载</a></div></div></div>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins white-bg">
                <div class="block">
                    <a class="title ell">告警报表</a>
                    <div class="line_break gap_mid"></div>
                    <div class="opt"><div class="flex_box"><div class="flex_block"><a href="##">详细</a></div><span class="break"></span><div class="flex_block"><a href="##">下载</a></div></div></div>
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="ibox float-e-margins white-bg">
                <div class="block">
                    <a class="title ell">环境监测报表</a>
                    <div class="line_break gap_mid"></div>
                    <div class="opt"><div class="flex_box"><div class="flex_block"><a href="##">详细</a></div><span class="break"></span><div class="flex_block"><a href="##">下载</a></div></div></div>
                </div>
            </div>
        </div>
    </div>




    <div class="break_nor"></div>
    <div class="block_ban">
        <div class="flex_box">
            <div class="flex_block break_left"></div>
            <a href="##" class="title">下辖的公园</a>
            <div class="flex_block break_right"></div>
        </div>
        <a href="##" class="arrow_more tmpfont tmpicon-right"></a>
    </div>
    <div class="break_nor"></div>



    <!--公园2-->
    <div class="row garden_list">

        <div class="col-sm-4 ">
            <div class="ibox float-e-margins white-bg">
                <div class="garden_block">
                    <div class="flex_box">
                        <a href="##" class="left" style="background-image: url(http://192.168.0.159:8086/static/login/img/p_big1.jpg),url(http://192.168.0.159:8086/static/login/img/loading.gif);"></a>
                        <div class="flex_block">
                            <ul class="txt">
                                <li class="title"><a href="##" class="ell">莲花山公园</a></li>
                                <div class="float_clear"></div>
                                <li class="add ell">地址：深圳市福田区红荔路</li>
                                <li class="charge ell">负责人：张春阳(15915698545)</li>
                            </ul>
                            <div class="float_clear"></div>
                            <div class="opt"><a href="##" class="btn btn-w-m btn-primary btn-sm">地图</a> <a href="##" class="btn btn-white  btn-sm">联系</a></div>
                        </div>
                        <div class="sta">
                            <span class="head">今日客流(人次)</span><div class="num bold_font">48756</div>
                            <div class="break_nor"></div>
                            <span class="head">今日告警(次)</span><div class="num bold_font">6</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 ">
            <div class="ibox float-e-margins white-bg">
                <div class="garden_block">
                    <div class="flex_box">
                        <a href="##" class="left" style="background-image: url(http://192.168.0.159:8086/static/login/img/p_big1.jpg),url(http://192.168.0.159:8086/static/login/img/loading.gif);;"></a>
                        <div class="flex_block">
                            <ul class="txt">
                                <li class="title"><a href="##" class="ell">莲花山公园</a></li>
                                <div class="float_clear"></div>
                                <li class="add ell">地址：深圳市福田区红荔路</li>
                                <li class="charge ell">负责人：张春阳(15915698545)</li>
                            </ul>
                            <div class="float_clear"></div>
                            <div class="opt"><a href="##" class="btn btn-w-m btn-primary btn-sm">地图</a> <a href="##" class="btn btn-white  btn-sm">联系</a></div>
                        </div>
                        <div class="sta">
                            <span class="head">今日客流(人次)</span><div class="num bold_font">48756</div>
                            <div class="break_nor"></div>
                            <span class="head">今日告警(次)</span><div class="num bold_font">6</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 ">
            <div class="ibox float-e-margins white-bg">
                <div class="garden_block">
                    <div class="flex_box">
                        <a href="##" class="left" style="background-image: url(http://192.168.0.159:8086/static/login/img/p_big1.jpg),url(http://192.168.0.159:8086/static/login/img/loading.gif);;"></a>
                        <div class="flex_block">
                            <ul class="txt">
                                <li class="title"><a href="##" class="ell">莲花山公园</a></li>
                                <div class="float_clear"></div>
                                <li class="add ell">地址：深圳市福田区红荔路</li>
                                <li class="charge ell">负责人：张春阳(15915698545)</li>
                            </ul>
                            <div class="float_clear"></div>
                            <div class="opt"><a href="##" class="btn btn-w-m btn-primary btn-sm">地图</a> <a href="##" class="btn btn-white  btn-sm">联系</a></div>
                        </div>
                        <div class="sta">
                            <span class="head">今日客流(人次)</span><div class="num bold_font">48756</div>
                            <div class="break_nor"></div>
                            <span class="head">今日告警(次)</span><div class="num bold_font">6</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 ">
            <div class="ibox float-e-margins white-bg">
                <div class="garden_block">
                    <div class="flex_box">
                        <a href="##" class="left" style="background-image: url(http://192.168.0.159:8086/static/login/img/p_big1.jpg),url(http://192.168.0.159:8086/static/login/img/loading.gif);;"></a>
                        <div class="flex_block">
                            <ul class="txt">
                                <li class="title"><a href="##" class="ell">莲花山公园</a></li>
                                <div class="float_clear"></div>
                                <li class="add ell">地址：深圳市福田区红荔路</li>
                                <li class="charge ell">负责人：张春阳(15915698545)</li>
                            </ul>
                            <div class="float_clear"></div>
                            <div class="opt"><a href="##" class="btn btn-w-m btn-primary btn-sm">地图</a> <a href="##" class="btn btn-white  btn-sm">联系</a></div>
                        </div>
                        <div class="sta">
                            <span class="head">今日客流(人次)</span><div class="num bold_font">48756</div>
                            <div class="break_nor"></div>
                            <span class="head">今日告警(次)</span><div class="num bold_font">6</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 ">
            <div class="ibox float-e-margins white-bg">
                <div class="garden_block">
                    <div class="flex_box">
                        <a href="##" class="left" style="background-image: url(http://192.168.0.159:8086/static/login/img/p_big1.jpg),url(http://192.168.0.159:8086/static/login/img/loading.gif);;"></a>
                        <div class="flex_block">
                            <ul class="txt">
                                <li class="title"><a href="##" class="ell">莲花山公园</a></li>
                                <div class="float_clear"></div>
                                <li class="add ell">地址：深圳市福田区红荔路</li>
                                <li class="charge ell">负责人：张春阳(15915698545)</li>
                            </ul>
                            <div class="float_clear"></div>
                            <div class="opt"><a href="##" class="btn btn-w-m btn-primary btn-sm">地图</a> <a href="##" class="btn btn-white  btn-sm">联系</a></div>
                        </div>
                        <div class="sta">
                            <span class="head">今日客流(人次)</span><div class="num bold_font">48756</div>
                            <div class="break_nor"></div>
                            <span class="head">今日告警(次)</span><div class="num bold_font">6</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 ">
            <div class="ibox float-e-margins white-bg">
                <div class="garden_block">
                    <div class="flex_box">
                        <a href="##" class="left" style="background-image: url(http://192.168.0.159:8086/static/login/img/p_big1.jpg),url(http://192.168.0.159:8086/static/login/img/loading.gif);;"></a>
                        <div class="flex_block">
                            <ul class="txt">
                                <li class="title"><a href="##" class="ell">莲花山公园</a></li>
                                <div class="float_clear"></div>
                                <li class="add ell">地址：深圳市福田区红荔路</li>
                                <li class="charge ell">负责人：张春阳(15915698545)</li>
                            </ul>
                            <div class="float_clear"></div>
                            <div class="opt"><a href="##" class="btn btn-w-m btn-primary btn-sm">地图</a> <a href="##" class="btn btn-white  btn-sm">联系</a></div>
                        </div>
                        <div class="sta">
                            <span class="head">今日客流(人次)</span><div class="num bold_font">48756</div>
                            <div class="break_nor"></div>
                            <span class="head">今日告警(次)</span><div class="num bold_font">6</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 ">
            <div class="ibox float-e-margins white-bg">
                <div class="garden_block">
                    <div class="flex_box">
                        <a href="##" class="left" style="background-image: url(http://192.168.0.159:8086/static/login/img/p_big1.jpg),url(http://192.168.0.159:8086/static/login/img/loading.gif);;"></a>
                        <div class="flex_block">
                            <ul class="txt">
                                <li class="title"><a href="##" class="ell">莲花山公园</a></li>
                                <div class="float_clear"></div>
                                <li class="add ell">地址：深圳市福田区红荔路</li>
                                <li class="charge ell">负责人：张春阳(15915698545)</li>
                            </ul>
                            <div class="float_clear"></div>
                            <div class="opt"><a href="##" class="btn btn-w-m btn-primary btn-sm">地图</a> <a href="##" class="btn btn-white  btn-sm">联系</a></div>
                        </div>
                        <div class="sta">
                            <span class="head">今日客流(人次)</span><div class="num bold_font">48756</div>
                            <div class="break_nor"></div>
                            <span class="head">今日告警(次)</span><div class="num bold_font">6</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 ">
            <div class="ibox float-e-margins white-bg">
                <div class="garden_block">
                    <div class="flex_box">
                        <a href="##" class="left" style="background-image: url(http://192.168.0.159:8086/static/login/img/p_big1.jpg),url(http://192.168.0.159:8086/static/login/img/loading.gif);;"></a>
                        <div class="flex_block">
                            <ul class="txt">
                                <li class="title"><a href="##" class="ell">莲花山公园</a></li>
                                <div class="float_clear"></div>
                                <li class="add ell">地址：深圳市福田区红荔路</li>
                                <li class="charge ell">负责人：张春阳(15915698545)</li>
                            </ul>
                            <div class="float_clear"></div>
                            <div class="opt"><a href="##" class="btn btn-w-m btn-primary btn-sm">地图</a> <a href="##" class="btn btn-white  btn-sm">联系</a></div>
                        </div>
                        <div class="sta">
                            <span class="head">今日客流(人次)</span><div class="num bold_font">48756</div>
                            <div class="break_nor"></div>
                            <span class="head">今日告警(次)</span><div class="num bold_font">6</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-4 ">
            <div class="ibox float-e-margins white-bg">
                <div class="garden_block">
                    <div class="flex_box">
                        <a href="##" class="left" style="background-image: url(http://192.168.0.159:8086/static/login/img/p_big1.jpg),url(http://192.168.0.159:8086/static/login/img/loading.gif);;"></a>
                        <div class="flex_block">
                            <ul class="txt">
                                <li class="title"><a href="##" class="ell">莲花山公园</a></li>
                                <div class="float_clear"></div>
                                <li class="add ell">地址：深圳市福田区红荔路</li>
                                <li class="charge ell">负责人：张春阳(15915698545)</li>
                            </ul>
                            <div class="float_clear"></div>
                            <div class="opt"><a href="##" class="btn btn-w-m btn-primary btn-sm">地图</a> <a href="##" class="btn btn-white  btn-sm">联系</a></div>
                        </div>
                        <div class="sta">
                            <span class="head">今日客流(人次)</span><div class="num bold_font">48756</div>
                            <div class="break_nor"></div>
                            <span class="head">今日告警(次)</span><div class="num bold_font">6</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>







    </div>



</div>


    <script th:src="@{/static/login/js/jquery.min.js?v=2.1.4}"></script>
    <script th:src="@{/static/login/js/bootstrap.min.js?v=3.3.5}"></script>
    <script th:src="@{/static/login/js/plugins/layer/layer.min.js}"></script>
    <script th:src="@{/static/login/js/content.min.js}"></script>
    <script th:src="@{/static/login/js/welcome.min.js}"></script>

<script th:src="@{/static/login/js/echarts.min.js}" type="text/javascript"></script>
<script th:src="@{/static/login/js/wonderland.js}" type="text/javascript"></script>
<script th:src="@{/static/login/js/PercentPie.js}" type="text/javascript"></script>

<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=M0Odnx4yOGSzD3cLlUP7DmtKben5axaw"></script>-->


<script th:src="@{/static/login/js/swiper5.min.js}" type="text/javascript"></script><!--mingfeng轮播插件-->
<script th:src="@{/static/login/js/swiper.animate.min.js}" type="text/javascript"></script><!--mingfeng轮播插件-->
<!-- <link th:href ="@{/static/login/css/swiper.min.css?v=1.1}" rel="stylesheet" type="text/css" /></link>--><!--mingfeng轮播插件--> 
      


<script type='text/javascript'>

    $(document).ready(function() {
//关于轮播
        var map_roll = new Swiper('.index_roll', {
            autoplay: true,
            parallax : true,
            direction : 'vertical',
            mousewheelControl : true,
            speed:500,
        });

    });

</script>


<script type="text/javascript">
/*<![CDATA[*/
    //echart
    //客流折线图

    var keliu = document.getElementById("keliu");
    var chart_keliu = echarts.init(keliu, 'wonderland');
    opt_keliu = {
        title: {
            text: ''
        },
        legend: {
            data: ['本周客流', '上周客流'],
            align: 'right',
            top:'4'
        },
        xAxis: {
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            name: '单位(万)',
            type: 'value',
        },
        series: [{
            name:'本周客流',
            data: [2.2, 2.5, 3.5, 2.8, 2.0, 4.5, 5.2],
            type: 'line'
        },{
            name:'上周客流',
            data: [1.2, 2.1, 2.9, 3.5, 2.4, 5.6, 4.8],
            type: 'line'
        }],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            show: false,
            borderColor: '#19507c',
            x: 22,
            x2: 0,
            y: 36,
            y2:0,
            height: 181
        },

    };
    if (opt_keliu && typeof opt_keliu === "object") {
        chart_keliu.setOption(opt_keliu, true);
    }
    //本科设备
    var shebei = document.getElementById("shebei");
    var chart_shebei = echarts.init(shebei, 'wonderland');
    opt_shebei = {
        title: {
            text: ''
        },
        legend: {
            data: ['安防', '养护', '环卫'],
            align: 'left',
            top:'4',
            itemWidth:12,
            itemHeight:12,

        },
        xAxis: {
            type: 'category',
            data: [ '6月', '7月', '8月', '9月', '10月', '11月']
        },
        yAxis: {
            name: '单位(万)',
            type: 'value',
        },
        series: [ {
            name:'安防',
            type:'bar',
            barWidth : 10,
            data:[332, 301, 334, 390, 330, 320],
            itemStyle: {
                barBorderRadius: [10, 10, 0, 0],
            },
        },
            {
                name:'养护',
                type:'bar',
                barWidth : 10,
                data:[132, 101, 134, 90, 230, 210],
                itemStyle: {
                    barBorderRadius: [10, 10, 0, 0],
                },
            },
            {
                name:'环卫',
                type:'bar',
                barWidth : 10,
                data:[182, 191, 234, 290, 330, 310],
                itemStyle: {
                    barBorderRadius: [10, 10, 0, 0],
                },
            }],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            show:false,
            x: 32,
            x2: 0,
            y: 36,
            y2:0,
            height: 181
        },

    };
    if (opt_shebei && typeof opt_shebei === "object") {
        chart_shebei.setOption(opt_shebei, true);
    }

    //设备故障率
    var opt_guzhang = {
        value:10,//百分比,必填
        name:'故障比例',//必填
        title:'',
        backgroundColor:null,
        color:['#f8ac59','#1ab394'],
        fontSize:14,
        domEle:document.getElementById("guzhang")//必填

    },chart_guzhang = new PercentPie(opt_guzhang);
    chart_guzhang.init();



    //告警处理
    var gaojing = document.getElementById("gaojing");
    var chart_gaojing = echarts.init(gaojing, 'wonderland');
    var data = [
        {value:65,name:'设备故障'},
        {value:40,name:'突发事态'},
        {value:12,name:'超出阈值'},
    ];
    var opt_gaojing = {
        title : {
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 0,
            top: 40,
            bottom: 0,
            itemWidth:12,
            itemHeight:12,
            data:['设备故障','突发事态','超出阈值'],
            formatter:  function(name){
                var total = 0;
                var target;
                for (var i = 0, l = data.length; i < l; i++) {
                    total += data[i].value;
                    if (data[i].name == name) {
                        target = data[i].value;
                    }
                }
                return name + ' ' + target + ' ' + ((target/total)*100).toFixed(2) + '%';
            }

        },
        series : [
            {
                name: '姓名',
                type: 'pie',
                radius : '55%',
                center: ['40%', '50%'],
                data:[
                    {value:65, name:'设备故障'},
                    {value:40, name:'突发事态'},
                    {value:12, name:'超出阈值'},
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 0,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.0)'
                    }
                }
            }
        ]
    };
    chart_gaojing.setOption(opt_gaojing);


    
    /*]]>*/

</script>
</body>
</html>

